import echarts from 'echarts'
window.echarts = echarts
console.log(echarts.version);
export function opt5FromData(name, value) {
  if (value > 1) { value = 1 }

  let percentage = (value * 100).toFixed(2)

  let opt = {
    xAxis: {
      show: false
    },
    yAxis: {
      show: false
    },
    legend: {
      show: false
    },
    title: [
      {
        text: percentage + '%',
        x: 'center',
        y: '40%',
        textStyle: {
          fontSize: 32,
          fontWeight: 100,
          color: '#fff',
          textAlign: 'center',
        }
      },
      {
        text: name,
        x: 'center',
        y: '55%',
        textStyle: {
          fontSize: 16,
          fontWeight: 100,
          color: 'rgba(255, 255, 255, 0.5)',
          textAlign: 'center',
        }
      },

    ],
    series: [
      {
        type: 'custom',
        name: name,
        data: [percentage],
        renderItem: function (param, api) {
          let centerX = api.getWidth() / 2
          let centerY = api.getHeight() / 2

          // 百分比
          const P = 0.55
          let w = api.getWidth() / 2 * P;

          // 六边形的边长
          let len = w * Math.tan(30 * Math.PI / 180) * 2

          let pos1 = [w + centerX, -len / 2 + centerY]
          let pos2 = [w + centerX, len / 2 + centerY]
          let pos3 = [0 + centerX, len + centerY]
          let pos4 = [-w + centerX, len / 2 + centerY]
          let pos5 = [-w + centerX, -len / 2 + centerY]
          let pos6 = [0 + centerX, -len + centerY]

          return {
            type: 'polygon',
            shape: {
              points: [pos1, pos2, pos3, pos4, pos5, pos6]
            },
            style: {
              fill: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
                {
                  offset: 0,
                  color: 'rgba(0, 0, 0, 0)'
                },
                {
                  offset: 1,
                  color: 'rgba(6, 156, 196, 0.32)'
                }
              ]),
            }

          }
        }
      },
      {
        type: 'custom',
        name: name,
        data: [percentage],
        renderItem: function (param, api) {
          let centerX = api.getWidth() / 2
          let centerY = api.getHeight() / 2

          // 百分比
          const P = 0.58
          let w = api.getWidth() / 2 * P;

          // 六边形的边长
          let len = w * Math.tan(30 * Math.PI / 180) * 2

          let pos1 = [w + centerX, -len / 2 + centerY]
          let pos2 = [w + centerX, len / 2 + centerY]
          let pos3 = [0 + centerX, len + centerY]
          let pos4 = [-w + centerX, len / 2 + centerY]
          let pos5 = [-w + centerX, -len / 2 + centerY]
          let pos6 = [0 + centerX, -len + centerY]

          return {
            type: 'polyline',
            shape: {
              points: [pos1, pos2, pos3, pos4, pos5, pos6, pos1]
            },
            style: {
              stroke: 'rgba(6, 156, 196, 0.8)',
              fill: null,
              lineWidth: 2,
              lineDash: [4, 2],
            },
          }
        }
      },
      {
        type: 'custom',
        name: name,
        data: [0, 1, 2, 3, 4, 5],
        renderItem: function (param, api) {
          let centerX = api.getWidth() / 2
          let centerY = api.getHeight() / 2
          let i = param.dataIndex
     
          return {
            origin: [centerX, centerY],
            rotation: (i * 60) * Math.PI / 180,
            type: 'polyline',
            shape: {
              points: [[225, 81], [246, 95], [246, 120]]
            },
            style: {
              stroke: 'rgba(3, 161, 252, 0.4)',
              fill: 'rgba(0,0,0,0)',
              lineWidth: 3
            },
            transition:['x', 'y', 'rotation']
          }
        }
      },
    ]

  }

  return opt
}

